<template>
	<view class="goodsDetail">
		<view class="goods-banner">
			<u-swiper :list="list" mode="number" indicator-pos="bottomRight" height="720"></u-swiper>
		</view>
		<view class="goodsDetail-plate-1">
			<view class="goods-name">
				{{detailData.goods_name}}
			</view>
			<view class="goods-price">
				<text>¥{{detailData.sub_prices}}</text>
				<text>¥{{detailData.goods_prices}}</text>
			</view>
		</view>
		<view class="goodsDetail-plate-2">
			<view class="item" v-for="(i,index) in tagsArr" :key="index">
				<image src="../../../../static/dui.png" mode="widthFix"></image>
				<text>{{i}}</text>
			</view>
		</view>
		<view class="goodsDetail-plate-3">
			<view class="title">
				商品信息
			</view>
			<view class="content">
				<view class="item-left">
					<view class="item">
						<text>编号：</text>
						<text>{{detailData.goods_sn}}</text>
					</view>
					<view class="item">
						<text>款式：</text>
						<text>{{detailData.goods_style}}</text>
					</view>
					<view class="item">
						<text>尺寸：</text>
						<text>{{detailData.goods_sizes}}</text>
					</view>
				</view>
				<view class="item-right">
					<view class="item">
						<text>材质：</text>
						<text>{{detailData.goods_texture}}</text>
					</view>
					<view class="item">
						<text>圈口：</text>
						<text>{{detailData.goods_circle}}</text>
					</view>
					<view class="item">
						<text>产地：</text>
						<text>{{detailData.from_area}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="goodsDetail-plate-4">
			<text>宝贝评价({{detailData.all_count}})</text>
			<view class="right">
				<text>查看全部</text>
				<u-icon name="arrow-right" size="28" color="#333"></u-icon>
			</view>
		</view>
		<view class="goodsDetail-plate-5">
			产品详情
		</view>
		<view class="goodsDetail-plate-6" v-html="htmlData">
			
		</view>
		<view class="buy-btn">
			<view class="left">
				<image src="../../../../static/kefu_icon.png" mode="widthFix"></image>
				<text>客服</text>
			</view>
			<view class="right">
				<button class="border-btn" @click="addCart">加入购物车</button>
				<button class="bg-btn" @click="goSubmitOrder">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				detailData:'',
				tagsArr:[],
				htmlData:'',
				id:0
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getGoodsDetail()
		},
		created() {
		},
		methods:{
			// 前往订单页面
			goSubmitOrder(){
				uni.removeStorageSync('old_data')
				uni.navigateTo({
					url:'submitOrder/submitOrder?id=' + this.id + '&type=1'
				})
			},
			// 添加到购物车
			addCart(){
				uni.request({
				    url:this.$Url +'/index.php/app/Cart/addCart',
				    method:'POST',
				    data:{
				       live_program_id:'',//直播id
					   goods_id:this.id,
					   goods_num:1
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
							uni.showToast({
								title:'添加成功',
								icon:'none',
								duration:1200
							})
				       } else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
				       }
				    }
				})
			},
			// 请求商品详情
			getGoodsDetail(){
				uni.request({
				    url:this.$Url +'/index.php/App/Goods/goodsDetail',
				    method:'POST',
				    data:{
				       goods_id:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
						   let goodsData = res.data.data.goods_mes
							let arr = []
							let dataArr = res.data.data.goods_mes.goods_pic
							let obj = {}
							for(let i = 0;i<dataArr.length;i++){
								obj.image = dataArr[i]
								arr.push(obj)
							}
							this.list = arr
							this.detailData = res.data.data.goods_mes
							this.tagsArr = goodsData.label_names
							this.htmlData = goodsData.goods_describe.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
				       } else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
				       }
				    }
				})
			}
		}
	}
</script>

<style lang="scss">
.goodsDetail{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.goodsDetail-plate-1{
		background-color: #fff;
		.goods-name{
			width: 707upx;
			font-size: 34upx;
			color: #333;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			padding-top: 20upx;
			margin-left: 20upx;
		}
		.goods-price{
			height: 100upx;
			display: flex;
			align-items: center;
			padding-left: 50upx;
			margin-bottom: 20upx;
			text:first-child{
				color: #c11a00;
				font-size: 36upx;
				font-weight: 600;
				margin-right: 40upx;
			}
			text:last-child{
				font-size: 26upx;
				color: #999;
				text-decoration: line-through;
			}
		}
	}
	.goodsDetail-plate-2{
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 20upx 30upx;
		margin-bottom: 20upx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 5upx;
			margin-right: 30upx;
			image{
				width: 30upx;
				margin-right: 15upx;
			}
			text{
				font-size: 24upx;
				color: $zhuti-color;
			}
		}
	}
	.goodsDetail-plate-3{
		background-color: #fff;
		.title{
			color: #000;
			font-weight: 600;
			font-size: 36upx;
			height: 84upx;
			line-height: 84upx;
			padding-left: 20upx;
			border-bottom: 1px solid #dedede;
		}
		.content{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 25upx 20upx;
			.item-left,.item-right{
				width: 50%;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;
				.item{
					margin-bottom: 30upx;
					text:first-child{
						font-size: 24upx;
						color: #333;
					}
					text:last-child{
						font-size: 24upx;
						color: #999;
					}
				}
			}
		}
	}
	.goodsDetail-plate-4{
		background-color: #fff;
		padding: 0 20upx;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #dedede;
		border-bottom: 1px solid #dedede;
		>text{
			color: #000;
			font-size: 32upx;
		}
		.right{
			display: flex;
			align-items: center;
			text{
				font-size: 30upx;
				color: #333;
			}
		}
	}
	.goodsDetail-plate-5{
		font-size: 30upx;
		color: #000;
		font-weight: 600;
		line-height: 100upx;
		height: 100upx;
		text-align: center;
	}
	.goodsDetail-plate-6{
		width: 100vw;
		padding: 20upx;
		padding-bottom: 140upx;
	}
	.buy-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		height: 104upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-left: 50upx;
			image{
				width: 40upx;
			}
			text{
				color: #333;
				font-size: 20upx;
			}
		}
		.right{
			display: flex;
			align-items: center;
			margin-right: 20upx;
			button{
				width: 280upx;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30upx;
			}
			button:first-child{
				border-top-right-radius: 0upx;
				border-bottom-right-radius: 0upx;
			}
			button:last-child{
				border-top-left-radius: 0upx;
				border-bottom-left-radius: 0upx;
			}
		}
	}
}
</style>
